$(function () {
    //需求1：筛选/列表/分页都需要传递参数，参数比较多所以设置为对象
    let q = {
        pagenum: 1,     //页码值，默认1
        pagesize: 10,       //每页显示多少天数据，默认两条
        cate_id: '',        //文章分类的id，默认空
        state: ''           //文章的状态，可选值有已发布、草稿， 默认空     
    }
    //需求1：初始化文章列表
    initArticleList()
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            //GET类型用params属性，POST用data属性
            params: q
        }).then(res => {
            // console.log(res);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            let arr = [];
            res.data.data.forEach(ele => {
                arr.push(`
                <tr>
                <td>${ele.title}</td>
                <td>${ele.cate_name}</td>
                <td>${formatDate(ele.pub_date)}</td>
                <td>${ele.state}</td>
                <td>
                    <button class="layui-btn layui-btn-xs">编辑</button>
                    <button data-id="${ ele.Id }" class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                </td>
              </tr>
                `)
            });
            $("tbody").empty().html(arr.join(''));
            renderPage(res.data.total);
        })
    };

    //需求2：渲染筛选中的文章类别列表
    let form = layui.form;
    initArtCateList();
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.messsage);
            }
            //渲染
            let arr = ['<option value="">请选择文章类别</option>']
            res.data.data.forEach(ele => {
                arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                `)
            });
            //循环完毕之后赋值
            let str = arr.join('');
            // console.log(str);
            $('[name=cate_id').empty().html(str);
            //所有标签，所有表单全部重新渲染layui中的select/checkbox/radio
            form.render();
        })
    };
    //需求3：筛选功能
    $("#searchForm").on('submit', function (e) {
        e.preventDefault();
        //改变查询参数中state和cate_id
        q.state = $('[name=state').val();
        q.cate_id = $('[name=cate_id]').val();
        initArticleList();
    });

    //需求4：分页
    let laypage = layui.laypage;
    function renderPage(total) {
        laypage.render({
            elem: 'pageBox' //注意，这里的 test1 是 ID，不用加 # 号
            , count: total //数据总数，从服务端得到
            , limit: q.pagesize,      //每页显示几条
            curr: q.pagenum,
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],        //当前页
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                // console.log(obj.limit);
                //不是首次执行
                if (!first) {
                    //改变当前页,把代码中的当前页改为参数中的当前页
                    q.pagenum = obj.curr;
                    //改变显示条数
                    q.pagesize = obj.limit;
                    //初始化文章列表
                    initArticleList();
                }
            }
        });
        //续期5：删除
        $("tbody").on('click', '.btn-del', function () {
            let id = $(this).attr('data-id');
            //弹出提示框
            layer.confirm("是否确认删除文章？", {icon: 3,title: '提示'}, function (index) {
                axios({
                    method: 'GET',
                    url: '/my/article/delete/' + id
                }).then(res => {
                    if (res.data.status !== 0) {
                        return layer.msg(res.data.message);
                    }
                    layer.msg('恭喜，删除成功！');
                    //判断删除的是否是本页面最后一条数据，axios删除的是后端的数据，页面还剩最后一条数据
                    //当前页必须在两页之后才允许--，因为没有第0页
                    if ($('.btn-del').length === 1 && q.pagenum >= 2){
                        q.pagenum --;
                    }
                    initArticleList();
                })
                layer.close(index);
            })
        })
    }
})